
<template>
    <div class="page-wrapper">
        <div class="i-layout-page-header">
            <PageHeader title="天域人力管理系统" hidden-breadcrumb />
        </div>
        <!-- 管理员管理页面头部 -->
        
        <div class="examinee-header">
            <!-- <Form ref="form" :model="data" :label-width="110" label-position="right">
                <Row :gutter="24" type="flex" justify="start">
                    <Col v-bind="grid">
                        <FormItem label="请假单编号：" prop="code" label-for="code">
                            <Input v-model="data.code" placeholder="请输入" element-id="code" />
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="姓名：" prop="name" label-for="name">
                            <Input v-model="data.name" placeholder="请输入" element-id="name" />
                        </FormItem>
                    </Col>
                    <template v-if="collapse">
                        <Col v-bind="grid">
                            <FormItem label="请假类别：" prop="type" label-for="type">
                                <Select v-width="'100%'" v-model="data.type" placeholder="请选择" element-id="type">
                                    <Option :value="1">事假</Option>
                                    <Option :value="2">病假</Option>
                                    <Option :value="3">病假（工伤）</Option>
                                    <Option :value="4">产假</Option>
                                    <Option :value="5">陪产假</Option>
                                    <Option :value="6">婚假</Option>
                                    <Option :value="7">丧假</Option>
                                    <Option :value="8">节育假</Option>
                                    <Option :value="9">其他假期</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col v-bind="grid">
                            <FormItem label="请假时间：" prop="startTimeSt" label-for="startTimeSt">
                                <DatePicker v-width="'100%'" type="daterange" v-model="data.startTimeSt" element-id="startTimeSt" />
                            </FormItem>
                        </Col>                    </template>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="searchDableData">搜索</Button>
                            <Button class="ivu-ml-8" @click="emptyData">清空条件</Button>
                            <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                                <template v-if="!collapse">
                                    展开 <Icon type="ios-arrow-down" />
                                </template>
                                <template v-else>
                                    收起 <Icon type="ios-arrow-up" />
                                </template>
                            </a>
                        </FormItem>
                    </Col>
                </Row>
            </Form> -->
            <btn-search :dataList="dataList" :searchType="['account','nickname','email','mobile']" @searchData="btnSearch" @addModal="addModal" @delAmides="delAmides" @refresh="refresh"></btn-search>
        </div>
        <!-- 管理员管理页面列表 -->
        <Table border ref="selection" @on-selection-change="tabSelect" :columns="columns4" :data="dataListActive">
            <template slot-scope="{ row, index }" slot="createtime">
                <div>{{row.createtime | timeFormatting("yhdms")}}</div>
            </template>
            <template slot="operation">
                <Button size="small" style="margin-right: 5px" @click="operationClick">查看考生信息</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="page">
            <page-processing :dataList="dataList" @pagingProcessing="pagingProcessing"></page-processing>
        </div>
        <!-- 添加管理员弹出框 -->
        <Modal v-model="showModal" :closable="false" :footer-hide="true" :mask-closable="false" title="添加管理员">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="140">
                <FormItem label="所属组别" prop="role_id">
                    <Select v-model="formValidate.role_id" style="width:348px">
                        <Option v-for="item in cityList" :value="item.id+''" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="管理员账号"  prop="account">
                    <Input v-model="formValidate.account"></Input>
                </FormItem>
                <FormItem label="管理员密码" prop="password">
                    <Input v-model="formValidate.password"></Input>
                </FormItem>
                <FormItem label="管理员昵称" prop="nickname">
                    <Input v-model="formValidate.nickname"></Input>
                </FormItem>
                <FormItem label="管理员邮箱" prop="email">
                    <Input v-model="formValidate.email"></Input>
                </FormItem>
                <FormItem label="管理员手机号码" prop="mobile">
                    <Input v-model="formValidate.mobile"></Input>
                </FormItem>
                <FormItem label="管理员状态" prop="state">
                    <Select v-model="formValidate.state" style="width:348px">
                        <Option value="0" key="正常">正常</Option>
                        <Option value="1" key="隐藏">隐藏</Option>
                    </Select>
                </FormItem>
                <FormItem label="管理员头像地址">
                    <Input v-model="formValidate.avatar_url"></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="formValidate.remark"></Input>
                </FormItem>
                <FormItem>
                    <div  class="dis-flex" style="justify-content: space-between;">
                        <Button @click="cancel" style="margin-right: 8px">取消</Button>
                        <Button type="primary" @click="affirmAdd('formValidate')">确认</Button>
                    </div>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
// import { getRoutersData } from '@/api/account'
    import btnSearch from "../common/search"
    import pageProcessing from "../common/pageProcessing"
    import {adminInfo,adminList,adminAdd,roleList} from "@/api/account"
    export default {
        components: {
            btnSearch,
            pageProcessing
        },
        data() {
            return {
                /* grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    code: '',
                    name: '',
                    type: null,
                    startTimeSt: []
                }, */
                showModal: false,
                /* 初始页面 */
                currentPage: 1,
                /* 添加管理员表单 */
                formValidate: {
                    account: '',
                    password: '',
                    role_id: '',
                    nickname: '',
                    email: '',
                    mobile: '',
                    avatar_url: '',
                    state: '0',
                    remark: ''
                },
                /* 管理员表单校验 */
                ruleValidate: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        {validator:(rule, value, cb)=>{this.accountCheck(value, cb)}, trigger: 'blur'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {validator:(rule, value, cb)=>{this.passwordCheck(value, cb)}, trigger: 'blur'}
                    ],
                    role_id: [{ required: true, message: '选择权限组', trigger: 'blur' }],
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        {validator:(rule, value, cb)=>{this.nicknameCheck(value, cb)}, trigger: 'blur'}
                    ],
                    email: [{ required: true, message: '请输入邮箱', type:'email', trigger: 'blur' }],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        {validator:(rule, value, cb)=>{this.mobileCheck(value, cb)}, trigger: 'blur'}
                    ],
                    state: [{ required: true, message: '请输入账号', trigger: 'blur' }]
                },
                columns4: [
                    { // 勾选框
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        width: '80'
                    },
                    {
                        title: '用户名',
                        key: 'account',
                        width: '130'
                    },
                    {
                        title: '昵称',
                        key: 'nickname',
                        width: '130'
                    },
                    {
                        title: '所属组别',
                        key: 'name',
                        width: '130'
                    },
                    {
                        title: 'Email',
                        key: 'Email',
                        width: '180'
                    },
                    {
                        title: '状态',
                        key: 'state',
                        width: '80'
                    },
                    {
                        title: '注册时间',
                        slot: 'createtime',
                        width: '180'
                    },
                    /* {
                        title: '考生姓名',
                        key: 'name',
                        width: '130'
                    },
                    {
                        title: '注册时间',
                        key: 'register_time',
                        width: '180'
                    },
                    {
                        title: '身份证号',
                        key: 'ID_num',
                        width: '240'
                    },
                    {
                        title: '手机',
                        key: 'phone',
                        width: '180'
                    },
                    {
                        title: '考务档案数',
                        key: 'file_num',
                        width: '140'
                    }, */
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                cityList: [
                    {
                        type: '0',
                        id: '',
                        name: '超级管理员'
                    },
                    {
                        type: '1',
                        name: '普通管理员'
                    }
                ],
                /* 考生数据 */
                /* dataList: [
                    {
                        name: "廖奕炯1",
                        ID_num: "441522199411290201",
                        phone: "13242012441",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },
                    {
                        name: "廖奕炯2",
                        ID_num: "441522199411290202",
                        phone: "13242012442",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯3",
                        ID_num: "441522199411290203",
                        phone: "13242012443",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯4",
                        ID_num: "441522199411290204",
                        phone: "13242012444",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯5",
                        ID_num: "441522199411290205",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    },{
                        name: "廖奕炯",
                        ID_num: "441522199411290293",
                        phone: "13242012445",
                        file_num: "3",
                        register_time: "2020-3-17"
                    }
                ], */
                dataList: [],
                /* 需要删除的数据 */
                delete: [],
                /* 当前页面数据 */
                dataListActive: []
            }
        },
        mounted() {
            this.getAdminList()
        },
        methods: {            
            /* 清空 */
            emptyData() {

            },
            searchDableData() {

            },
            // 数据搜索
            btnSearch(dataListActive) {
                this.dataListActive = dataListActive
            },
            // 添加管理员
            addModal(show) {
                this.showModal = show
                this.getRoleList()
            },
            // 删除管理员
            delAmides() {
                console.log("删除管理员")
                let diff = this.getSubtract(this.dataList, this.delete)
                this.dataListActive = diff
            },
            // 刷新
            refresh() {
                console.log("刷新列表")
                this.getAdminList()
            },
            // 添加管理员确认事件
            affirmAdd() {
                this.$refs["formValidate"].validate((valid) => {
                    if (valid) {
                        adminAdd(this.formValidate).then(res=> {
                            const {data} = res
                            if(data.code === "200") {
                                this.showModal = false;
                                this.$Message.success('管理员添加成功');
                                this.getAdminList()
                            } else {
                                this.$Message['error']({
                                    content: data.msg,
                                    duration: 3
                                });
                            }
                        })
                    } else {
                        this.$Message.error('表单输入不完整，请检查后再次尝试!')
                    }
                })
            },
            cancel() {
                this.showModal = false;
                this.$Message.info('取消了添加管理员');
            },
            tabSelect(selection) {
                this.delete = selection
            },
            operationClick() {
                this.$router.push({name: "examineeInfo"})
            },
            // 数组求差集
            getSubtract(unionArr,subsetArr){
                let arr3 = unionArr.filter(v=>{
                    var str = JSON.stringify(v);
                    return subsetArr.every(v=>JSON.stringify(v)!=str);
                });
                return arr3
            },
            /* 分页处理 */
            pagingProcessing(dataListActive) {
                this.dataListActive = dataListActive
            },
            /* 请求管理员列表数据 */
            getAdminList() {
                adminList({}).then(res=>{
                    const {data} = res
                    this.dataList = data.data.data
                })
            },
            /* 请求管理员组别数据 */
            getRoleList() {
                roleList({}).then(res=>{
                    const {data} = res
                    console.log(data)
                    this.cityList = data.data
                })
            },
            /* 账号校验 */
            accountCheck(value, cb){
                //验证英文字母或数字
                var zmReg=/^[a-zA-Z0-9]*$/;
                if(value!='' && !zmReg.test(value)){
                    return cb(new Error('只能是英文字母或数字！'))
                }
                cb()
            },
            /* 密码校验 */
            passwordCheck(value, cb) {
                //验证6-20位字母和数字
                var zmnumReg=/^[0-9a-zA-Z]{6,20}$/;
                if(!zmnumReg.test(value)){
                    return cb(new Error('密码由6-20位字母数字组成,请重新输入'))
                }
                cb()
            },
            /* 昵称校验 */
            nicknameCheck(value, cb) {
                //验证1-20位汉字字母数字下划线
                var zmnumReg= /^[\u4E00-\u9FA5a-zA-Z0-9_]{1,20}$/;
                if(!zmnumReg.test(value)){
                    return cb(new Error('昵称由1-20位汉字字母数字下划线组成,请重新输入'))
                }
                cb()
            },
            /* 手机号校验 */
            mobileCheck(value, cb) {
                //11位手机号
                var zmnumReg= /^1[3456789]\d{9}$/;
                if(!zmnumReg.test(value)){
                    return cb(new Error('手机号格式不正确,请重新输入'))
                }
                cb()
            }
        }
    }
</script>

<style lang="less">
// 管理员管理页面头部
.examinee-header {
    width: 100%;
    border: 1px solid #e8eaec;
    border-bottom: none;
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    box-sizing: border-box;
    .examinee-left {
        .btn {
            margin-right: 5px;
        }
    }
    .header-btn {
        margin-left: 15px;
    }
}
.page {
    margin-top: 20px;
}
</style>